<!--
 * @Author: yangzhiyu yangzhiyu@mail.pigcms.com
 * @Date: 2024-03-09 09:26:12
 * @LastEditors: yangzhiyu yangzhiyu@mail.pigcms.com
 * @LastEditTime: 2024-03-13 15:46:17
 * @FilePath: \fe_user_pc\src\components\baseModel\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<script setup>
import { reactive, ref } from 'vue';

import baseModel from "@/components/baseModel/baseModel.vue";

const props = defineProps({
  btnConfig: {
    type: Object,
    default: () => {
      return {
        text: '取消',
        show: true,
        type: 'primary',
        isDanger: false
      }
    }
  },
  contentText: {
    type: String,
    default: '正在生成视频帧...'
    // default: '正在生成视频帧...'
  },
  detailed: {
    type: String,
    defalult: ''
  },
  // 百分比增加量
  baseIncrement: {
    type: Number,
    default: 1
  },
  marskClose: {
    type: Boolean,
    default: true
  },
  type: {
    type: String,
    default: 'primary'
  }
});

const data = ref({});
// 加载进度
const percent = ref(0)
// 循环定时器
const interval = ref(null);

const emit = defineEmits(['cancel']);

const dialog = ref(null)

// 取消展示
const handleCancel = () => {
  emit('cancel', data.value)
  dialog.value && dialog.value.closeModal()

};
// 打开弹窗
const showModal = (params) => {
  percent.value = 0;
  data.value = params;
  if (params == 'setInterval') {
    interval.value = setInterval(() => {
      // 根据当前百分比计算新的增量（越靠近100%，增加的越少）
      const increment = props.baseIncrement * (1 - percent.value / 100);
      percent.value = +Math.min(percent.value + (increment < 0.5 ? 0.5 : increment), 99).toFixed(0)
    }, 2000)
  }
  dialog.value && dialog.value.showModal();

};
// 关闭弹窗
const closeModal = () => {
  // clearInterval(interval.value)
  // percent.value = 100
  // setTimeout(() => {
  dialog.value && dialog.value.closeModal()

  // }, 400)
};

const loding_model = ref(null);

// 修改进度
const updatePercent = (num) => {
  // debugger
  percent.value = num
}
defineExpose({
  showModal,
  closeModal,
  updatePercent
});

</script>
<template>
  <!-- <a-config-provider prefix-cls="ss">
    <div class="loding_model" ref="loding_model">
      <a-modal :closable="false" :maskClosable="props.marskClose" :getContainer="() => loding_model" width="350px"
        class="Model_box" centered style="border: none;" :title="null" v-model:visible="visible">
        <div class="loding_content">
          <a-progress type="circle" :percent="percent" />
          <p class="loding_text"> {{ percent !== 100 ? props.contentText : '视频拆分中...' }}</p>
          <p class="loding_msg" v-if="props.detailed">{{ props.detailed }}</p>
        </div>
        <template #footer>
          <div class="loding_footer" v-if="props.btnConfig.show">
            <a-button key="back" v-if="!props.btnConfig.isDanger" :type="props?.type" @click="handleCancel">
              {{ props.btnConfig.text }}</a-button>
            <a-button key="isBack" v-else @click="handleCancel">{{ props.btnConfig.text }}</a-button>
          </div>
        </template>
</a-modal>
</div>
</a-config-provider> -->

  <div>
    <baseModel ref="dialog" :contentWidth="'400px'" :maskClosable="false" :centered="false" :closable="false">
      <template #title>
        <div class="title_box">
          <span class="title">提示</span>
        </div>
      </template>
      <template #content>
        <div class="loding_content">
          <a-progress type="circle" :percent="percent" />
          <p class="loding_text"> {{ percent !== 100 ? props.contentText : '视频拆分中...' }}</p>
          <p class="loding_msg" v-if="props.detailed">{{ props.detailed }}</p>
        </div>
      </template>
      <template #footer>
        <div class="loding_footer" v-if="props.btnConfig.show">
          <a-button key="back" v-if="!props.btnConfig.isDanger" :type="props?.type" @click="handleCancel">
            {{ props.btnConfig.text }}</a-button>
          <a-button key="isBack" v-else @click="handleCancel" :type="props?.type">{{ props.btnConfig.text }}</a-button>
        </div>
      </template>
    </baseModel>

  </div>

</template>

<style lang="less" scoped>
.title_box {
  display: flex;
  flex-direction: column;

  .title {
    font-size: 14px;
    font-weight: 600;
  }

  .tips {
    font-size: 12px;
    color: #aaaaaa;
    margin-top: 10px;
  }
}

.loding_content {
  width: 100%;
  // height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 20px;

  .loding_text {
    font-size: 16px;
    color: #3D3D3D;
    font-weight: 600;
    margin: 15px 0;
  }

  .loding_msg {
    font-size: 14px;
    color: var(--ss-primary-color);
    ;
  }
}

.loding_footer {
  display: flex;
  justify-content: center;
}

// :deep( .ss-modal-close){
//    display: none !important;
//  }
:deep(.ss-modal-footer) {
  border: none !important;
}

:deep(.ss-modal-content) {
  // border-radius: 15px !important;
  // padding-bottom: 15px;
}
</style>